var vm = new Vue({
  el: "#app",
  data: {
    comName: '推荐哈',
    // tabs: ['推荐哈1', '推哈哈2', '哈哈推3', '哈哈推4', '哈哈推5']
    tabs: [],
    tuijian_item: { name: '推荐', istag: false },
    type_id: null,//当前列表类型的id
    type_name: '',
    page: 1,//当前页数
    limit: 10,//限制条数
    render_list: [],
    isLoading: false,//上拉刷新时加载中
    myloadding: false,//切换时加载中
    list_loading: false,//上拉加载的加载中
    list_finished: false,//上拉加载完成,没有更多数据时
    lock: false
  },
  created: function () {
    this.init();
    //
  },
  mounted: function () {
  },
  watch: {

  },
  methods: {
    init: function () {
      var that = this;
      $.ajax({
        url: app.webUrl + "/view/api_activity/typelist",
        data: { type: 1 },
        type: "POST",
        success: function (ret) {
          if (ret.code == '1') {
            console.log(ret);
            for (i in ret.data) {
              vm.tabs.push(ret.data[i]);
            };
            // tabs的第一项为默认项
            // that.tuijian_item.istag = true;
            // that.type_name = that.tuijian_item.name;
            // 获取列表
            // that.myloadding = true;
            // that.get_list(suc, err);
            // function suc(ret) {
            //   // that.myloadding = false;
            //   // 只有当lock为true时才让组件实行加载的方法
            //   that.open_lock();
            //   that.list_finished = false;
            //   if(ret.data.length<that.limit){
            //     that.list_finished = true;
            //   }
            // }
            // function err() {
            //   that.myloadding = false;
            // }
            that.$nextTick(function(){
              that.click_moren();
            })
            zujian();
          }
        }
      });
    },
    // 选择顶部栏
    chooseTab: function (tab) {
      var that = this;
      this.tabs.forEach(function (item) {
        item.istag = false;
      });
      this.tuijian_item.istag = false;
      tab.istag = true;
      this.type_name = tab.name;
      that.lock = false;
      // 更新列表
      this.page = 1;
      this.render_list = [];
      this.myloadding = true;
      vant.Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中'
      });
      this.get_list(suc, err);
      function suc(ret) {
        that.myloadding = false;
        that.list_finished = false;
        that.list_finished = false;
        that.open_lock();
        if (ret.data.length < (+that.limit)) {
          that.list_finished = true;
        };
        vant.Toast.clear();
      }
      function err() {
        that.myloadding = false;
        that.list_finished = false;
        that.list_finished = false;
        vant.Toast.clear();
      }
      this.$forceUpdate();
      this.$nextTick(function(){
        // 移动滚动条到中间
        that.move_scroll();
      })
    },
    move_scroll:function(){
        var odom = $('li.target').get(0);
        var oul = $('.header-nav>ul').get(0);
        // 目标li到父级ul的距离
        var oLeft = odom.offsetLeft - oul.offsetLeft;
        var cha = oLeft - oul.offsetWidth*0.47;
        if(cha>=0){
            oul.scrollLeft = cha;
        }
    },
    // 获取列表
    get_list: function (suc, err) {
      var that = this;
      if (that.type_name == '推荐') {
        var data = {
          page: that.page,
          limit: that.limit,
          recommend:1//是否推荐 0 不推荐 1推荐
        }
      } else {
        var data = {
          page: that.page,
          limit: that.limit,
          channel: that.type_name
        }
      }
      $.post(app.webUrl + '/view/api_activity/lists', data, function (ret) {
        if (ret.code == '1') {
          ret.data.forEach(function (item) {
            that.render_list.push(item);
          });
          that.page++;
          // 成功的回掉函数
          if (typeof suc == 'function') {
            suc(ret);
          }
        } else {
          if (typeof err == 'function') {
            // 失败的回掉函数
            err(ret);
          }
        }
      }).fail(function (err) {
        err();
      })
    },
    // 下拉刷新
    onRefresh: function () {
      var that = this;
      that.lock = false;
      that.page = 1;
      that.render_list = [];
      this.get_list(suc, err);
      function suc(ret) {
        vant.Toast('刷新成功');
        that.isLoading = false;
        that.list_finished = false;
        that.list_finished = false;
        that.open_lock();
        if (ret.data.length < (+that.limit)) {
          that.list_finished = true;
        }
      }
      function err() {
        vant.Toast('刷新失败');
        that.isLoading = false;
        that.list_finished = false;
        that.list_finished = false;
      }
    },
    // 上拉加载,jiaye
    onLoad: function () {
      var that = this;
      if (!that.lock) {
        that.list_loading = false;
        return;
      }
      this.get_list(suc, err);
      //
      function suc(ret) {
        // 加载状态结束
        that.list_loading = false;
        if (ret.data.length == 0) {
          that.list_finished = true;
        }
      }
      //
      function err(ret) {
        // 加载状态结束
        that.list_loading = false;
      }
    },
    // 打开lock
    open_lock: function () {
      var that = this;
      // 设一个延迟
      setTimeout(function () {
        that.lock = true;
      }, 1000)
    },
    // 跳转
    link: function (id) {
      window.location.href = 'http://wx191210.slyz.info:580/view/activity/hdxq.html?&activityId=' + id;
    },
    //点击搜索框跳转
    click_search: function () {
      window.location.href = './hddt3.html';
    },
    // 初始化点击默认选项
    click_moren: function(){
      var index = 0;
      var fenleiId = app.GetQueryValue('fenleiId');
      if(fenleiId){
        for(var i=0; i<this.tabs.length; i++){
          if(this.tabs[i].id == fenleiId){
            index = i+1;
            break;
          }
        }
      }
      $('.header-nav li').get(index).click();
    }
  }
  // components: {
  //   'component-a': {
  //     template: `<button>{{msg}}</button>`,

  //     // data数据
  //     data: function() {
  //       return {
  //         msg: 'Rabbit'
  //       }
  //     }
  //   },
  //   // 'component-b': ComponentB
  // },
})
function zujian() {
  console.log(11111);

  console.log(vm.tabs[0].name);
  Vue.component(vm.tabs[0].name, {
    template: `
    <li @click="go_hdxq">
      <div class="logo"><img src="/public/img/wx.png" alt=""></div>
      <div class="cont">
        <p class="cont_name">
          <span>必胜客啊啊</span>
          <span style="margin: 0 2px;">|</span>
          <span>100元代金券·中行</span>
          <span style="margin: 0 2px;">|</span>
          <span>天天有券</span>
        </p>
        <p class="cont_price">
          <span>活动价:22元</span>
          <span>最近成交价:33元</span>
          <span><img src="/public/img/yanjing.png" alt="">2100</span>
        </p>
      </div>
    </li>
    `,
    methods: {
      go_hdxq() {
        window.location.href = "/view/activity/hdxq.html";
      }
    }
  })

  Vue.component(vm.tabs[1].name, {
    template: ` 
  <li @click="go_hdxq">
    <div class="logo"><img src="/public/img/zhifubao.png" alt=""></div>
    <div class="cont">
      <p class="cont_name">
        <span>必胜客啊啊</span>
        <span style="margin: 0 2px;">|</span>
        <span>100元代金券·中行</span>
        <span style="margin: 0 2px;">|</span>
        <span>天天有券</span>
      </p>
      <p class="cont_price">
        <span>活动价:33元</span>
        <span>最近成交价:44元</span>
        <span><img src="/public/img/yanjing.png" alt="">2100</span>
      </p>
    </div>
  </li>
  1111
  `,
    methods: {
      go_hdxq() {
        window.location.href = "/view/activity/hdxq.html";
      }
    }
  })
  Vue.component(vm.tabs[2].name, {
    template: `
  <li @click="go_hdxq">
    <div class="logo"><img src="/public/img/qq.png" alt=""></div>
    <div class="cont">
      <p class="cont_name">
        <span>必胜客啊啊</span>
        <span style="margin: 0 2px;">|</span>
        <span>100元代金券·中行</span>
        <span style="margin: 0 2px;">|</span>
        <span>天天有券</span>
      </p>
      <p class="cont_price">
        <span>活动价:22元</span>
        <span>最近成交价:33元</span>
        <span><img src="/public/img/yanjing.png" alt="">2100</span>
      </p>
    </div>
  </li>
  `,
    methods: {
      go_hdxq() {
        window.location.href = "/view/activity/hdxq.html";
      }
    }
  })
  Vue.component(vm.tabs[3].name, {
    template: `
  <li @click="go_hdxq">
    <div class="logo"><img src="/public/img/wxpyq.png" alt=""></div>
    <div class="cont">
      <p class="cont_name">
        <span>必胜客啊啊</span>
        <span style="margin: 0 2px;">|</span>
        <span>100元代金券·中行</span>
        <span style="margin: 0 2px;">|</span>
        <span>天天有券</span>
      </p>
      <p class="cont_price">
        <span>活动价:33元</span>
        <span>最近成交价:44元</span>
        <span><img src="/public/img/yanjing.png" alt="">2100</span>
      </p>
    </div>
  </li>
  `,
    methods: {
      go_hdxq() {
        window.location.href = "/view/activity/hdxq.html";
      }
    }
  })
  Vue.component(vm.tabs[4].name, {
    template: `
  <li @click="go_hdxq">
    <div class="logo"><img src="/public/img/chong.png" alt=""></div>
    <div class="cont">
      <p class="cont_name">
        <span>必胜客啊啊</span>
        <span style="margin: 0 2px;">|</span>
        <span>100元代金券·中行</span>
        <span style="margin: 0 2px;">|</span>
        <span>天天有券</span>
      </p>
      <p class="cont_price">
        <span>活动价:22元</span>
        <span>最近成交价:33元</span>
        <span><img src="/public/img/yanjing.png" alt="">2100</span>
      </p>
    </div>
  </li>
  `,
    targetmethods: {
      go_hdxq() {
        window.location.href = "/view/activity/hdxq.html";
      }
    }
  })
  vm.comName = vm.tabs[1].name;
  vm.comName = vm.tabs[0].name;
}







// 点击筛选按钮跳到筛选页面
$('.header-nav .shaixuan').click(function () {
  window.location.href = "/view/activity/fenleixuanze.html";
})

// 点击活动跳到活动详情页面
// $('main ul li' ).click(function() {
//   window.location.href="../../components/activity/html/hdxq.html";
// })
function go_hdxq() {
  window.location.href = "/view/activity/hdxq.html";
}


function fabu() {
  $('.fabu').show()
  console.log('11111')
  $('body').css('overflow-y', 'hidden')
}

function cancel() {
  $('.fabu').hide()
  console.log('11111')
  $('body').css('overflow-y', 'visible')
}